<template>
	<view class="content">
		<view class="headtop">
			<image src="../../static/images/wode_bj.png" class="bj"></image>
			<view class="headtitile">
				<text>AI问答</text>
			</view>
		</view>
		<view class="container">
			<scroll-view @scrolltoupper="addInfo" scroll-with-animation :scroll-into-view="item" class="Scroll"
				scroll-y="true">
				<view class="box" v-for="(item, index) in history" :key="index" :id="`item-${index}`">
					<view v-show="item.role == 'user'" class="input">
						<p class="i">
							{{ item.content }}
						</p>
					</view>
					<view v-show="item.role == 'assistant'" class="output">
						<p class="o">
							<zero-markdown-view :markdown="item.content"></zero-markdown-view>
							<view v-show="item.content.length == 0" class="spinner">
								<view class="bounce1"></view>
								<view class="bounce2"></view>
								<view class="bounce3"></view>
							</view>
						</p>
					</view>
				</view>
				<view style="width: 100vw; height: 1px" :id="lastItem"></view>
			</scroll-view>
		</view>
		<view class="footer clearfix">
			<view class="left fl">
				<input type="text" placeholder="请输入文字..." placeholder-style="color:#787B8F" v-model="message"
					:disabled="loading === true" />
			</view>
			<view class="right fl" @click="send">发送</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		nextTick,
		onMounted,
		computed
	} from 'vue';
	import {
		request
	} from '../../api/request';
	import {
		onLoad
	} from '@dcloudio/uni-app';

	// 历史记录
	const history = ref([]);
	const loading = ref(false);

	const lastItem = ref(`item-${new Date().getTime()}`);

	onLoad(() => {
		request({
			url: '/api/model/history',
			method: 'GET'
		}).then((resp) => {
			history.value = resp.data;
		});
	});

	let item = ref('');

	// 发送的内容
	let message = ref('');

	// 动态更新item的值
	watch(
		history,
		(n, o) => {
			nextTick(() => {
				item.value = `item-${history.value.length - 1}`;
			});
		}, {
			deep: true,
			immediate: true
		}
	);

	// 打字机效果
	function typeWriter(content, item) {
		item.content = '';
		let textInterval = undefined;
		let textIndex = 0;
		let charList = content.split('');
		textInterval = setInterval(() => {
			// 生成一个1-10随机数
			let randomNum = Math.floor(Math.random() * 10) + 1;
			for (let i = 0; i < randomNum; i++) {
				if (charList[textIndex] === undefined) {
					loading.value = false;
					clearInterval(textInterval);
					break;
				}
				item.content += charList[textIndex];
				textIndex++;
				if (textIndex == charList.length - 1) {
					loading.value = false;
					clearInterval(textInterval);
					break;
				}
			}
		}, 100);
	}

	// 发送
	const send = async () => {
		if (loading.value === true) {
			return;
		}
		loading.value = true;
		if (message.value.length == 0) {
			uni.showToast({
				title: '请输入内容',
				icon: 'none'
			});
			loading.value = false;
			return;
		}
		history.value.push({
			role: 'user',
			content: message.value
		});
		history.value.push({
			role: 'assistant',
			content: ''
		});
		let last_message = message.value;
		message.value = '';

		// let json = {
		// 	"user_input": last_message
		// }
		
		let json = {
			"model": "glm-4-flash",
			"messages": [
				{
					"role": "user",
					"content": last_message
				}
			]
		}
		
		uni.request({
			url: 'https://open.bigmodel.cn/api/paas/v4/chat/completions',
			header: {
				"Authorization": "Bearer da00b57e38934bf3a1a18f90eaf1616b.hAqHfrm29cwI8p3z",
				"Content-Type": "application/json"
			},
			data: json,
			method: 'POST',
			success: (res) => {
				// let resp = res.data.assistant_reply;
				let resp = res.data.choices[0].message.content;
		
				let item = history.value[history.value.length - 1];
				typeWriter(resp, item);
			},
			fail(error) {
				uni.showToast({
					title: error,
					icon: 'none'
				})
			}
		});

		// uni.request({
		// 	url: 'http://39.106.73.165:4405/chat',
		// 	data: json,
		// 	method: 'POST',
		// 	success: (res) => {

		// 		let resp = res.data.assistant_reply;

		// 		let item = history.value[history.value.length - 1];
		// 		typeWriter(resp, item);
		// 	},
		// 	fail(error) {
		// 		uni.showToast({
		// 			title: error,
		// 			icon: 'none'
		// 		})
		// 	}
		// });
	};

	// 触顶加载更多
	const addInfo = () => {
		
	};
</script>

<style lang="scss" scoped>
	.dmxtitle {
		font-weight: 600;
		font-size: 18px;
		line-height: 100px;
		height: 70px;
		width: 100vw;
		text-align: center;
	}

	.spinner {
		margin-top: 5px;
		margin-bottom: 10px;
		margin-left: 10px;
		margin-right: 10px;
	}

	.spinner>view {
		width: 10rpx;
		height: 10rpx;
		background-color: #717171;

		border-radius: 50%;
		display: inline-block;
		-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
		animation: bouncedelay 1.4s infinite ease-in-out;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}

	.spinner .bounce1 {
		-webkit-animation-delay: -0.32s;
		animation-delay: -0.32s;
	}

	.spinner .bounce2 {
		-webkit-animation-delay: -0.16s;
		animation-delay: -0.16s;
	}

	@-webkit-keyframes bouncedelay {

		0%,
		80%,
		100% {
			-webkit-transform: scale(0);
		}

		40% {
			-webkit-transform: scale(1);
		}
	}

	@keyframes bouncedelay {

		0%,
		80%,
		100% {
			transform: scale(0);
			-webkit-transform: scale(0);
		}

		40% {
			transform: scale(1);
			-webkit-transform: scale(1);
		}
	}

	.content {
		width: 100vw;
		height: 90vh;

		.headtop {
			width: 100%;
			margin: 0 auto;
			position: relative;
			height: 160rpx;
			z-index: 200;

			.bj {
				width: 100%;
				height: 286rpx;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
			}

			.headtitile {
				width: 94%;
				margin: 0 auto;
				position: absolute;
				top: 94rpx;
				left: 3%;

				image {
					width: 20rpx;
					height: 36rpx;
					float: left;
					margin-right: 18rpx;
					margin-top: -3rpx;
				}

				text {
					height: 36rpx;
					line-height: 36rpx;
					font-size: 32rpx;
					color: #FFFFFF;
					float: left;
				}

				view {
					height: 36rpx;
					line-height: 36rpx;
					font-size: 30rpx;
					color: #ECDEA4;
					float: right;
				}
			}
		}

		.container {
			width: 100%;
			height: 71vh;
			padding: 10rpx 10rpx 10rpx 20rpx;
			box-sizing: border-box;
			box-shadow: 0rpx 1rpx 0rpx 0rpx rgba(77, 77, 77, 0.4);
			position: relative;
			z-index: 230;

			.Scroll {
				width: 100%;
				height: 100%;

				.box {
					width: 100%;
					padding: 0 10rpx 0 0;
					box-sizing: border-box;

					.output {
						width: 100%;
						display: flex;
						justify-content: flex-start;
						margin: 30rpx 0;

						.o {
							max-width: 70vw;
							height: auto;
							padding: 10rpx 20rpx;
							background-color: #242831;
							border-radius: 10rpx;
							color: #FFFFFF;
							font-size: 30rpx;
						}
					}

					.input {
						width: 100%;
						display: flex;
						justify-content: flex-end;
						margin: 20rpx 0;

						.i {
							max-width: 70vw;
							height: auto;
							padding: 20rpx;
							background-color: #242831;
							border-radius: 10rpx;
							color: #FFFFFF;
							font-size: 30rpx;
						}
					}
				}
			}
		}

		.footer {
			width: 100vw;
			background-color: #191D26;
			padding: 24rpx;

			.left {
				margin-right: 30rpx;

				input {
					height: 70rpx;
					line-height: 70rpx;
					width: 500rpx;
					padding-left: 12rpx;
					border: 1rpx solid #242831;
					background: #191D26;
					box-shadow: 0rpx 1rpx 0rpx 0rpx rgba(77, 77, 77, 0.4);
					font-size: 24rpx;
					border-radius: 10rpx;
					color: #787B8F;
				}
			}

			.right {
				width: 156rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				background: linear-gradient(270deg, #EAC59F, #E4B985, #FFF9CE);
				border-radius: 10rpx;
				font-size: 30rpx;
				color: #806B1A;
			}
		}
	}
</style>